<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>42、总结生命周期</title>
</head>
<body>
  <div id="test"></div>

  <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  <script src="https://cdn.staticfile.org/prop-types/15.6.1/prop-types.js"></script>

  <script type="text/babel">
    /**
     * 一、初始化阶段：ReactDOM.render()触发---初次渲染
     * 1、constructor()
     * 2、componentWillMount()
     * 3、render()
     * 4、componentDidMount()
     * 二、更新阶段：有组件内部this.setState()或父组件更新render触发
     * 1、shouldComponentUpdate()
     * 2、componentWillUpdate()
     * 3、render()    ----必须使用的一个
     * 4、componentDidUpdate()  ----常用
     *    一般在这个钩子中做一些初始化的事，例如：开启定时器、发送网络请求、订阅消息
     * 三、卸载组件：由ReactDOM.unmountComponentAtNode()触发
     * 1、componentWillUnmount()  ----常用
     *    一般在这个钩子中做一些收尾的事，例如：关闭定时器、取消订阅消息
     * */
    // 父组件A
    class A extends React.Component {
      // 初始化状态
      state = {
        carName: '奔驰'
      }

      changeCar = () => {
        this.setState({carName: '奥拓'})
      }

      render() {
        return (
          <div>
            <div>我是A组件</div>
            <button onClick={this.changeCar}>换车</button>
            <B carName={this.state.carName} />  
          </div>
        )
      }
    }
    
    // 子组件B
    class B extends React.Component {
      
    }
  </script>
</body>
</html>